<style type="text/css">
.mui-media-object {width: 110px;height: 110px;padding: 2px;border-radius: 5px;background-color: #FFF;}
.mui-media-object span{ width:106px; height:106px; border-radius: 5px;display:block;background-size:auto 100%!important;  }
#selector{background:#f7f7f7; height:80%;}
#selector .mui-popover-content{ height:80%;}
#selector .mui-scroll-wrapper{ margin-bottom:0;}
#selector .mui-table-view:after{ height:1px;}
#selector .mui-table-view{border-radius: 0; text-align:left;color:#333;}
#selector .mui-table-view.mui-table-view-radio li{display:inline-block;border-radius:8px;padding:8px 10px;background:#eaeaea;margin:0 8px 5px 0;}
#selector .mui-table-view.mui-table-view-radio li:after{height:0;}
#selector .mui-table-view.mui-table-view-radio li.mui-selected{color:#FFF;background:#ff5000;}
#selector .mui-table-view.mui-table-view-radio li.noselect{color: #333;background:#eaeaea;}
#selector .mui-table-view.mui-table-view-radio.mui-single li{display:block;font-size:14px;margin-right:0;margin-bottom:10px;border-radius:5px;line-height:2.2;background:#f5f5f5;border:1px solid #eaeaea;}
#selector .mui-table-view.mui-table-view-radio.mui-single li>a:not(.mui-btn){margin: -11px -10px;border-radius:0;}
#selector .mui-table-view.mui-table-view-radio.mui-single li .mui-badge{right:5px;color:#FF7B33}
#selector .mui-table-view.mui-table-view-radio.mui-single li .mui-navigate-right:after{font-family:Muiext;content: " ";font-size:18px;}
#selector .mui-table-view.mui-table-view-radio.mui-single li.mui-selected{color:#333;background:#f5f5f5;border:1px solid #008fe0;}
#selector .mui-table-view.mui-table-view-radio.mui-single li.mui-selected .mui-navigate-right:after{color:#008fe0;content:"\e675";top:inherit!important;right:0;bottom:-7px;}
#selector .mui-bar-footer{padding:0; background:#fff; height:45px;line-height:50px;}
#selector .mui-bar-footer .mui-btn{width:50%;height:45px;border-radius:0;float:right;margin:0!important}
#icon-close{ color:#5f646e;position: absolute; top:40px; right:5px;font-weight: bold; z-index:999;}
</style>
<div id="selector" class="mui-popover mui-popover-bottom mui-popover-action">
	<div class="mui-popover-header">请选择<a href="#selector" class="mui-pull-right mui-popover-close"><me class="mui-icon mui-icon-closeempty"></me></a></div>
    <div class="mui-card-header" style="display:none">
        <div class="mui-media-object mui-pull-left"><span style="background:url({php echo tomedia($activity['thumb'])}) no-repeat center"></span></div>
        <div class="mui-media-body">
            <span id="option_msg">请选择：
            {loop $specs $spec}
            {$spec['title']}
            {/loop}</span>
        </div>
        <a href="#selector" id="icon-close" class="mui-pull-right"><span class="mui-icon mui-icon-close"></span></a>
    </div>
    <div class="mui-popover-content">
    	<div class="mui-scroll-wrapper">
            <div class="mui-scroll" style="padding-bottom:50px;">
                <!-- 可选择菜单 -->
                {loop $specs $spec}
                <input type='hidden' name="optionid[]" class='optionid optionid_{$spec['id']}' value="" title="{$spec['title']}">
                <p style="margin: 8px;">{$spec['title']}</p>
                <ul class="mui-table-view mui-table-view-radio{if count($specs)==1} mui-single{/if}" specid='{$spec['id']}'>
                {loop $spec['items'] $k $o}
                    {if count($specs)==1}
                    {php $option = model_activity::getSingleSpecOption($o['id']);}
                    <li class="mui-table-view-cell mui-badge js-selector-check{if $k==0} mui-selected{/if}" specid='{$spec['id']}' oid="{$o['id']}" select="{if $k==0}true{else}false{/if}"><a class="mui-navigate-right">{$o['title']}<span class="mui-badge mui-badge-inverted mui-big {if $option['aprice']>0}mui-rmb{/if}">{php echo $option['aprice']>0?$option['aprice']:'免费'}</span></a></li>
                    {else}
                    <li class="mui-table-view-cell mui-badge js-selector-check" specid='{$spec['id']}' oid="{$o['id']}" select="false">{$o['title']}</li>
                    {/if}
                {/loop}
                </ul>
                {/loop}
                <ul class="mui-table-view"{if $activity['team']} style="display:none"{/if}>
                    <li class="mui-table-view-cell" style="padding:8px 0;">
                        <span style="line-height:2.1">输入数量</span>
                        <span class="mui-numbox mui-pull-right">
                        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                        <input name="teamnum" class="mui-input-numbox js-teamnum" type="number" value="1" pattern="[0-9]*">
                        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                        </span>
                    </li>
                </ul>
                <p class="mui-text-gray mui-text-right" style="padding-right:8px;font-size:0.5rem;"><span id="quota">{if $activity['quota']>0 || $optquota>0}剩余{php echo $forquota?$forquota:($activity['quota']>$joinnum?$activity['quota']-$joinnum:0);}{$activity['unitstr']}{else}不限量{/if}</span></p>
                <p style="padding-bottom:50px;"></p>
            </div>
        </div>
    </div>
    <div class="mui-bar mui-bar-footer">
        <p class="mui-pl15" id="option_aprice" style="width:50%;display:inline-block;">合计：<span class="mui-rmb mui-big mui-text-orange">{php echo $optaprice?$optaprice:($activity['aprice']?$activity['aprice']:'0.00');}</span></p>
        <input type="hidden" id="optaprice" name="optaprice" value="{php echo $optaprice?$optaprice:($activity['aprice']?$activity['aprice']:'0.00');}"/>
        <input type="hidden" id="optionid" name="optionid" value="{$optionid}"/>
        <input type="hidden" id="forquota" value="{php echo $forquota?$forquota:($activity['quota']>$joinnum?$activity['quota']-$joinnum:0);}" />
        <input type="hidden" id="optquota" value="{php echo $optquota?$optquota:$activity['quota']}" />
        <button type="button" class="mui-btn mui-btn-orange mui-btn-block" onclick="joinaction()">下一步</button>
    </div>
</div>
<script>
mui('.mui-scroll-wrapper').scroll();
//触发规格选择器
$(".js-selector").on("tap",function(e) {
	mui('#selector').popover('toggle');
});
var options = {php echo json_encode($options)};
var specs = {php echo json_encode($specs)};
var aprice    ="{$activity['aprice']}",
	teamquota = parseInt("{$activity['teamquota']}"),
	aquota    = parseInt("{$activity['quota']}"),
	joinnum   = parseInt("{$joinnum}"),
	optionid  = parseInt("{$optionid}"),
	unitstr   = "{$activity['unitstr']}";
var selected = [];
function option_selected() {
	var ret = {
		no: [],
		is: [],
		all: []
	};
	$(".optionid").each(function () {
		ret.all.push($(this).val());
		//console.log($(this).val());
		if ($(this).val() == '') {
			ret.no.push($(this).attr("title"));
			//ret.no = $(this).attr("title");
		}else{
			ret.is.push($(this).attr("title"));
			
		}
	})
	if (typeof(ret.no[0])=='undefined'){
		ret.no[0]='';
	}
	return ret;
}
$(function(){
	//输入名额控制
	$("input.js-teamnum").bind('input propertychange, change', function(e) {
		e.stopPropagation();
		var forquota=parseInt($("#forquota").val()),optquota=parseInt($("#optquota").val());
		if ($(this).val()<=0){
			$(this).val(1);
		}
		//判断名额
		if(forquota==0 && optquota>0){
			$(this).val(0);
			util.alert('该票已售完', ' ');
			return false;
		}else if($(this).val() > forquota && optquota>0){
			$(this).val(forquota);
			util.alert('已超出剩余最大值', ' ');
			return false;
		}
		if ($(this).val() > teamquota && teamquota > 0){
			$(".js-teamnum").val(teamquota);
			util.alert('已达该票输入最大值', ' ', function() {
				$(".js-teamnum").val(teamquota);
			});
		}else{
			var payprice = ($('#optaprice').val()*$(this).val()).toFixed(2);
			$('#option_aprice .mui-rmb').html(payprice);
		}
	});
	//选项控制
	$(".js-selector-check").on("tap",function() {
		var specid = $(this).attr("specid");
		var specnum = $('.mui-table-view-radio').length;
		var oid = $(this).attr("oid");
		$(".optionid_" + specid).val(oid);
		
		if ($(this).attr("select")=='true' && specnum>1){//选中后取消
			$(this).toggleClass('noselect');
			$(this).attr("select", "flase");
			$(".optionid_" + specid).val('');
			if (aprice>0){
				$("#option_aprice .mui-rmb").html((aprice*$(".js-teamnum").val()).toFixed(2));
				$("#optaprice").val(aprice);
			}else{
				$("#option_aprice .mui-rmb").html('0.00');
				$("#optaprice").val('0.00');
			}
			if (aquota>0 && aquota>joinnum){
				$("#quota").html("剩余"+(aquota-joinnum)+unitstr);
			}else{
				$("#quota").html("不限量");
			}
			var ret = option_selected();
			var option_msg = '';
			for (var i = 0; i < ret.no.length; i++) {
				option_msg += ret.no[i]+' ';
			}
			$("#option_msg").html('请选择：'+option_msg);	
		}else{//选中
			$(this).removeClass('noselect');
			$(this).parent('ul').find('.js-selector-check').attr("select", "flase");
			$(this).attr("select", "true");
			var optionid = '', optquota = 0, optused = 0, optaprice = 0, opttitle = '', option_msg = '';
			var ret = option_selected();
			var len = options.length;
			if (ret.no[0] == '') {//判断是否全选中
				for (var i = 0; i < len; i++) {
					var o = options[i];
					var ids = ret.all.sort();
					var specs = o.specs.split('_').sort();
					option_msg += ret.is[i]+' ';
					if (specs.toString() == ids.toString()) {
						optionid = o.id;
						optquota = parseInt(o.quota);
						optused = parseInt(o.usednum)+parseInt(o.falsenum);
						optaprice = o.aprice;
						opttitle = o.title;
						break;
					}
				}
				$("#optionid").val(optionid);
				$("#quotaval").val(optquota);
				$("#option_msg").html('已选：'+opttitle);
				if (optaprice>0){
					$("#option_aprice .mui-rmb").html((optaprice*$(".js-teamnum").val()).toFixed(2));
					$("#optaprice").val(optaprice);
				}else{
					$("#option_aprice .mui-rmb").html('0.00');
					$("#optaprice").val('0.00');
				}
				if(optquota>0){
					num = optquota > optused ? optquota-optused:0;
					$("#quota").html("剩余"+num+unitstr);
					$("#forquota").val(num);
					$("#optquota").val(optquota);
					if (num<=0) util.alert('该票已售完', ' ');
				}else{
					$("#quota").html("不限量");
					$("#forquota").val(0);
					$("#optquota").val(0);
				}
				
			}else{
				for (var i = 0; i < ret.no.length; i++) {
					option_msg += ret.no[i]+' ';
				}
				$("#option_msg").html('请选择：'+option_msg);	
			}
		}
		
	});
});

function joinaction() {
	var ret = option_selected();
	ret.no[0] = optionid?'':ret.no[0];
	if (ret.no[0] != '') {
		util.alert('请选择 '+ret.no[0]+' !', ' ', function() {});
		return;
	}
	
	var inputnum = parseInt($(".js-teamnum").val());
	location.href = "{php echo app_url('home/join/display',array('activityid'=>$activityid))}" + "&optionid=" + $("#optionid").val() + "&teamnum=" + inputnum;
}
</script>